<template>
  <div class="home">
    <page-scroll :footer="true">
      <template #bg>
        <div class="bg"></div>
      </template>
      <template #header>
        <gltitle
          :title="title"
          :is_name="false"
          :is_back="true"
          :is_lang="false"
          :is_kf="false"
        ></gltitle>
      </template>
      <template #content>
        <div class="container">
          <div class="box"></div>
          <div class="tile">
            <div class="t1">{{ $t("page4.doc45") }}</div>
            <div class="t2">{{ $t("page4.doc46") }}</div>
          </div>

          <div class="fotter">
            <div class="mflex items-center justify-center download-btn" @click="beSureClick('android',0, 'and1')">
              <img src="@/assets/images/download/google.png" alt="">
              {{ $t('page4.doc106') }}{{ $t("page4.doc47") }}
            </div>
            <div class="mflex items-center justify-center download-btn" @click="beSureClick('android',0, 'and2')">
              <img src="@/assets/images/download/android.png" alt="">
              {{ $t('page4.doc107') }}{{ $t("page4.doc47") }}
            </div>
            <div class="mflex items-center justify-center download-btn" @click="beSureClick('ios',1, 'ios1')">
              <img src="@/assets/images/download/apple.png" alt="">
              {{ $t('page4.doc108') }}{{ $t("page4.doc47") }}
            </div>
            <div class="mflex items-center justify-center download-btn" @click="beSureClick('ios',1, 'ios2')">
              <img src="@/assets/images/download/ios.png" alt="">
              {{ $t('page4.doc109') }}{{ $t("page4.doc47") }}
            </div>
          </div>
          <div class="text">
            {{ $t("page4.doc48") }}
          </div>
        </div>
      </template>
    </page-scroll>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: this.$t("title.doc34"),
    };
  },
  mounted() {
      this.getAppUrl()
  },
  methods: {
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
          urlData:[]
      });
    },


      getAppUrl(){
          this.$post(this.URL.user.version).then((res) => {
              if (res.code == 0) {
                  this.urlData = res.data
              } else {
                  this.$toast(res.message);
              }
          });
      },
    beSureClick(val,type,str) {
        let findVal = this.urlData.find((item) => {
            return item.type === type;
        });
        console.log(findVal,'t')


      if (val == "ios") {
          if(str == 'ios1'){
              window.open(findVal.url, '_blank');
          }else{
              window.open(findVal.superUrl, '_blank')
          }
      } else {
          if(str == 'and1'){
              window.open(findVal.url, '_blank');
          }else{
              window.open(findVal.superUrl, '_blank')
          }

        // window.location.href =
        //   "https://play.google.com/store/apps/details?id=com.ContiClip.ahdev";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 400px;
}

/deep/ .head {
  background: transparent !important;
}
.page {
  background: #000100 url("../../assets/images/download/bg.png") no-repeat top center;
  background-size: 100%;
  min-height: 100vh;
  padding-bottom: 60px;
}
.tile {
  color: #fff;
  text-align: center;
  font-weight: bold;
  /* Drop Shadow */

  font-family: PangMenZhengDao;
  font-size: 0.5rem;
  font-style: normal;
  line-height: normal;
  .t1 {
    margin-top: 0.96rem;
    margin-bottom: 0.32rem;
  }
}
.fotter {
  text-align: center;
  max-width: 7rem;
  z-index: 2;
  width: 90%;
  margin: 30px auto 20px;

  .download-btn {
    height: 36px;
    font-size: 15px;
    background: url("../../assets/images/download/ju.png");
    background-size: 100% 100%;
    margin-bottom: 10px;

    img {
      width: 16px;
      margin-right: 10px;
    }
  }

  .btn {
    width: 48%;
    color: #333;
    font-weight: 600;
    font-size: 0.28rem;
    border: 0;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    height: 56px;
    justify-content: center;
    margin-bottom: 14px;

    img {
      margin-right: 0.28rem;
      height: 0.42rem;
    }
  }
  //.btn:nth-child(-n+2) {
  //  background: #fff;
  //  color: #fff;
  //}
  .pic {
    img {
      margin-top: 0.48rem;
      height: 1.16rem;
    }
  }
}

.text {
  color: #5AEC6B;
  font-family: PingFang HK;
  font-size: 0.26rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 auto;
  width: 80%;
}

.layer {
  width: 100%;
  height: 4rem;
  position: fixed;
  left: auto;
  bottom: 0;
  background: rgba(7, 7, 7, 0.1);
  max-width: 10rem;
}
</style>
